<template>
  <div class="content">
      <van-nav-bar title="用户登录"  left-arrow @click-left="onClickLeft"/>
      <div class="login-box">
        <img src="http://www.jituwang.com/uploads/allimg/150922/258230-150922221K447.jpg" width="120" height="120" alt="">
        <van-field v-model="username" placeholder="请输入用户名" right-icon="question-o" @click-right-icon="$toast('可以是手机号/邮箱')"/>
        <van-field v-model="password" placeholder="请输入密码">
          <van-button slot="button" size="small" type="warning">忘记密码</van-button>
        </van-field>
        <van-button size="large" type="danger" style="margin-top:30px;" @click.native="login">登录</van-button>
        <div class='reg'>
          <router-link :to="{path: 'Reg'}">没有账号？点击注册</router-link>
        </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Field } from 'vant'

export default {
  data() {
    return {
      username: '',
      password: '',
      sqlusername: 'a123456',
      sqlpwd: 123456
    }
  },
  mounted () {
    // 测试账号密码
    console.log('账号：a123456，密码：123456')
  },
  methods:{
    onClickLeft () {
      this.$router.push({path: '/'})
    },
    login () {
      if (this.username != this.sqlusername || this.password != this.sqlpwd) {
        this.$toast('账号或密码错误，请重新输入')
        this.username = this.password = ''
        this.$store.commit('addUserName','')
      }else{
        this.$toast('登录成功')
        // 将账户存储到main.js
        this.$store.commit('addUserName',this.username)
      }
    }
  }
}
</script>

<style scoped>
.content{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(245, 245, 245)
}
.login-box{
  padding-bottom: 50px;
}
.login-box img{
  display: block;
  margin: 40px auto;
  border-radius: 50%;
}
.reg{
  padding: 20px;
  text-align: right;
}
.reg a{
  color: red;
}
</style>
